<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>弹窗</title>
	<style>
		*{ margin: 0; padding: 0; }
		#btn{ width: 100px; height: 40px; line-height: 40px; outline: 0; border: 1px solid #333; background: #555; color: #fff; cursor: pointer; }
		#btn:hover{ background: #444; }
		#login{ width: 260px; height: 390px; box-shadow: 0 0 5px #999; padding: 10px 20px; position: relative; display: none; background: #fff; }
		#close{ position: absolute; width: 26px; height: 26px; right: 10px; top: 10px; }
		#head{ text-align: center; font-size: 20px; line-height: 2em; width: 100%; }
		#login p label{ font-size: 16px; line-height: 3em; }
		#login p:nth-of-type(7){ font-size: 12px; color: #aaa; text-align: center; line-height: 3em; }
		#login input{ width: 100%; height: 30px; }
		#login input[type=button]{ height: 40px; margin-top: 20px; background: #222; color: #fff; outline: 0; border: 1px solid #111; }
		#login>img{ width: 100%; height: 100px; position: absolute; left: 0; bottom: 0; display: block; }
	</style>
	<script type="text/javascript" src="./myJs.js"></script>
	<script>
		window.onload = function(){
			var login = document.getElementById("login");
			var btn = document.getElementById("btn");
			var head = document.getElementById("head");
			var close = document.getElementById("close");
			//点击弹框
			btn.onclick = function(){
				popAlert( login,head );
			}
			//关闭按钮
			close.onclick = function(){
				login.style.display = "none";
				document.body.removeChild( layer);
			}
		}
	</script>
</head>
<body style="height:2000px;">
	<input type="button" value="点击显示弹窗" id="btn">
	<div id="login">
		<div id="close"><img src="./images/close.jpg" alt=""></div>
		<p id="head">登陆</p>
		<p><label for="email">邮箱 :</label></p>
		<p><input type="email" id="email"></p>
		<p><label for="pwd">密码 :</label></p>
		<p><input type="password" id="pwd"></p>
		<p><input type="button" value="登 陆"></p>
		<p>忘记密码 创建账号</p>
		<img src="./images/bg.jpg" alt="">
	</div>
</body>
</html>